import React, { useEffect, useState } from "react";
import "./index.less";
import { Badge, Popconfirm, Space, Table, TableProps, message } from "antd";
import { getUserNotSign, signClear } from "../../server/api";
interface DataType {
  key: string;
  name: string;
  age: number;
  userStatus: string;
}
const UserSign: React.FC = () => {
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "账号",
      dataIndex: "userAccount",
      key: "userAccount",
    },
    {
      title: "名称",
      dataIndex: "userName",
      key: "userName",
    },

    {
      title: "状态",
      key: "userStatus",
      dataIndex: "userStatus",
      render: (_, { userStatus }) => (
        <>
          {userStatus ? (
            <Badge status="success">启用</Badge>
          ) : (
            <Badge status="error">锁定</Badge>
          )}
        </>
      ),
    },
    {
      title: "清空签到次数",
      key: "action",
      render: (_, record: any) => (
        <Space size="middle">
          <Popconfirm
            title="清除签到次数"
            description="清楚之后就不能恢复了，确定要清除吗"
            onConfirm={() => deleteSignCount(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <a>清除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [data, setData] = useState([]);
  const [pgn, setPgn] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const onChangePgn = (page: number, pageSize: number) => {
    setPgn({ ...pgn, current: page, pageSize: pageSize });
  };
  const getData = async () => {
    const res = await getUserNotSign({
      pageNum: pgn.current,
      pageSize: pgn.pageSize,
    });
    setData(res.data.records);
    setPgn({ ...pgn, total: res.data.total });
  };
  const deleteSignCount = async (id: number) => {
    await signClear({ userId: id });
    getData();
    message.success("清除成功");
  };
  useEffect(() => {
    getData();
  }, [pgn.current]);
  return (
    <div className="userSign-ctn">
      <Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={{ ...pgn, onChange: onChangePgn }}
      />
    </div>
  );
};
export default UserSign;
